
/**
 * 1.swig编译html模板
 * 2.useref合并html引用的资源文件成一个新文件，html模板需要寻找相应的注释
  <!-- build:<type> <path>  -->
  ... HTML Markup, list of script / link tags.
  <!-- endbuild -->
  例如：
  <!-- build:js assets/scripts/vendor.js -->
  <script src="/node_modules/jquery/dist/jquery.js"></script>
  <script src="/node_modules/popper.js/dist/umd/popper.js"></script>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
  <!-- endbuild -->

 */
const { src, dest, series, parallel, watch } = require('gulp')

const del = require('del')
const borwserSync = require('browser-sync')

const loadPlugins = require('gulp-load-plugins')

const plugins = loadPlugins()
const bs = borwserSync.create()
// const sass = require('gulp-sass')
// const babel = require('gulp-babel')
// const swig = require('gulp-swig')
// const imagemin = require('gulp-imagemin')

const cwd = process.cwd()

let config = {
  // default config
  build: {
    src: 'src',
    dist: 'dist',
    temp: 'temp',
    public: 'public',
    paths: {
      styles: 'assets/styles/*.scss',
      scripts: 'assets/scripts/*.js',
      pages: '*.html',
      images: 'assets/images/**',
      fonts: 'assets/fonts/**'
    }
  }
}
try{
  const loadConfig = require(`${cwd}/pages.config.js`)
  config = Object.assign({}, config, loadConfig)
} catch(e) {}

const clean = () => {
  return del([config.build.dist, config.build.temp])
}

const style = () => {
  return src(config.build.paths.styles, { base: config.build.src, cwd: config.build.src })
  .pipe(plugins.sass({ outputStyle: 'expanded' }))
  .pipe(dest(config.build.temp))
  .pipe(bs.reload({ stream: true }))
}

const script = () => {
  return src(config.build.paths.scripts, { base: config.build.src, cwd: config.build.src })
  .pipe(plugins.babel({ presets: [require('@babel/preset-env')] }))
  .pipe((dest(config.build.temp)))
  .pipe(bs.reload({ stream: true }))
}

const page = () => {
  return src(config.build.paths.pages, { base: config.build.src, cwd: config.build.src })
  .pipe(plugins.swig({ data: config.data }))
  .pipe((dest(config.build.temp)))
  .pipe(bs.reload({ stream: true }))
}

const image = () => {
  return src(config.build.paths.images, { base: config.build.src, cwd: config.build.src })
  .pipe(plugins.imagemin())
  .pipe(dest(config.build.dist))
}

const font = () => {
  return src(config.build.paths.fonts, { base: config.build.src, cwd: config.build.src })
  .pipe(plugins.imagemin())
  .pipe(dest(config.build.dist))
}

const extra = () => {
  return src('**', { base: config.build.public, cwd: config.build.public })
  .pipe(dest(config.build.dist))
}

const serve = ()=> {
  watch(config.build.paths.styles, { cwd: config.build.src }, style)
  watch(config.build.paths.scripts, { cwd: config.build.src }, script)
  watch(config.build.paths.pages, { cwd: config.build.src }, page)
  // watch('src/assets/images/**', image)
  // watch('src/assets/fonts/**', font)
  // watch('public/**', extra)

  watch([
    config.build.paths.images,
    config.build.paths.fonts,
  ], { cwd: config.build.src }, bs.reload)

  watch('**', { cwd: config.build.public }, bs.reload)

  bs.init({
    notify: false,
    port: 2080,
    // open: false,
    // files: 'dist/**', // 用bs.reload()代替
    server: {
      baseDir: [config.build.temp, config.build.dist, config.build.public],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

// 引入的资源合并到一个文件中
const useref = () => {
  return src(config.build.paths.pages,  { base: config.build.temp, cwd: config.build.temp } )
  // searchPath合并哪个目录下的资源文件
  .pipe(plugins.useref({ searchPath: [config.build.temp, '.'] }))
  // html js css 压缩
  .pipe(plugins.if(/\.js$/, plugins.uglify()))
  .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
  // htmlmin 默认只针对一些属性的空格，换行并不压缩
  .pipe(plugins.if(/\.html$/, plugins.htmlmin({
    // 压缩换行
     collapseWhitespace: true, 
     // 压缩行间js
     minifyCSS: true,
     // 压缩行间css
     minifyJS: true
  })))
  .pipe(dest(config.build.dist))
}

const compile = parallel(style, script, page)

const build = series(clean, parallel(series(compile, useref), image, font, extra))

const develop = series(compile, serve)

module.exports = {
  compile,
  build,
  serve,
  clean,
  develop,
  useref
}